​

​

Define the Product

What are the different elements that creator needs today in MVP?

1. Login Page: Secure authentication for users to access their projects and personal data.
2. Home Page / Project Page: Central hub where users can view and manage their projects.
3. Workspace:
4. • 3D Objects: Tools to import, create, and manipulate 3D models.
   • Images: Options to upload and edit images for use in 3D environments.
   • Texts: Text elements that can be added to projects.
   • Audio: Tools to integrate and manage audio files.
   • Video: Capabilities to include and edit video clips.
   • Keyframes: Animation controls to manage transitions and animations within the workspace.

Elements needed in the future as the platform grows?

• Templates: Pre-designed templates to streamline the creation process and provide starting points for users.
• Community Showcase Page: A space for users to share their projects, view others’ work, and draw inspiration.
• Assets Page: A repository of resources, such as stock 3D models, textures, and other assets, that users can utilize in their projects.
  
  How is the value delivered to the users?
  
  Web-Based Platform: Avataar's Creator delivers value through its web-based interface, making it easily accessible from any device with an internet connection. This approach ensures that users can create, edit, and manage their 3D projects without the need for specialized hardware or software installations.
  
  What data will be captured in what module?
  
• User Data:
  • Backend: Secure storage of user credentials, personal information, and preferences. This data ensures personalized user experiences and secure access control.
• Project-Level Data:
  • Frontend and Backend: Includes project names, categories, and elements uploaded by users such as images, videos, 3D objects, audio files, HDRI images, lights, and keyframes. This data is essential for organizing and managing user projects, enabling seamless editing and rendering.
  • Metadata: Information about project creation dates, modification history, and user interactions to support project versioning and activity tracking.
• 3D Models:
  • Frontend: Efficient storage of pivots, nodes, and animations of objects. This includes detailed attributes like position, orientation, scale, and keyframe data to facilitate real-time rendering and manipulation.
  • Optimization Data: Compression and optimization parameters to ensure smooth performance, especially for web-based interactions.
• User Interaction Data:
  • Frontend and Backend: Capturing how users interact with the platform, including clickstream data, session durations, and feature usage. This information helps in enhancing user experience by identifying popular features and potential areas for improvement.

Backend: Aggregated data on platform usage, project trends, and user demographics. This supports strategic decisions regarding feature development and marketing efforts.

Decode the tech Layer​

Product Components and tech modules

1. Login Page:
2. • Tech Module: Authentication Service
   • Technology Used: OAuth 2.0, JWT (JSON Web Tokens), bcrypt for password hashing
3. Home Page / Project Page:
4. • Tech Module: User Interface (UI) and Project Management Service
   • Technology Used: React.js for frontend, Node.js/Express.js for backend, MongoDB for project data storage
5. Workspace:
6. • Tech Module: 3D Rendering Engine, Asset Management, Animation Controller
   • Technology Used: Three.js for 3D rendering, WebGL for graphics rendering, AWS S3 for asset storage, custom animation libraries

Data Flow and Logic Implementation

Architecture Overview

1. User Interaction:
2. • Frontend: Built with React.js, users interact with the UI components (Login, Home Page, Workspace).
   • API Gateway: Handles all incoming requests and routes them to the appropriate microservices.
3. Authentication Service:
4. • Process: User credentials are sent to the authentication service via API calls. The service uses OAuth 2.0 for authentication and issues JWT tokens for session management.
   • Data Flow: User credentials → Auth Service → JWT token → Frontend
5. Project Management Service:
6. • Process: Handles CRUD operations for projects. Data is stored in MongoDB.
   • Data Flow: API requests from frontend → Project Management Service → MongoDB → Response to frontend
7. 3D Rendering Engine:
8. • Process: Manages 3D objects, animations, and real-time rendering using Three.js and WebGL.
   • Data Flow: 3D assets from AWS S3 → Rendering Engine → User’s browser
9. Asset Management:
10. • Process: Uploads and retrieves assets like images, videos, and 3D models.
    • Data Flow: User uploads → API Gateway → Asset Management Service → AWS S3 → Retrieval as needed
11. Animation Controller:
12. • Process: Handles keyframes and animations.
    • Data Flow: Animation data → Animation Controller → Real-time rendering

Technology Choices

• React.js: Chosen for its component-based architecture and efficient rendering of UI components.
• Node.js/Express.js: Provides a lightweight and efficient backend service, with asynchronous capabilities suitable for handling multiple requests.
• MongoDB: Selected for its flexibility in handling unstructured data and scalability.
• Three.js and WebGL: Utilized for their powerful 3D rendering capabilities directly in the browser.
• AWS S3: Preferred for its durability, scalability, and ease of integration for asset storage.

Optimization for Scale and Security

Scale

• Microservices Architecture: Divides the application into smaller, manageable services that can be independently scaled.
• Load Balancing: Distributes incoming traffic across multiple servers to ensure no single server is overwhelmed.
• Caching: Utilizes Redis for caching frequently accessed data, reducing database load and improving response times.
• Content Delivery Network (CDN): Uses services like CloudFront to deliver static assets quickly to users worldwide.

Security

• Data Encryption: Encrypts data both in transit (using TLS) and at rest (using encryption services from AWS).
• JWT Tokens: Provides secure session management, reducing the risk of session hijacking.
• Regular Security Audits: Conducts regular audits and employs tools like OWASP ZAP for vulnerability scanning.
• Role-Based Access Control (RBAC): Ensures that only authorized users (in terms of paid b2b users) can access certain parts of the system.

Detail out nuances and trade-offs

User Experience Tradeoffs for Security and Scalability

Security: To enhance security, we use JWT (JSON Web Tokens) for session management. While this ensures secure authentication and authorization, it requires users to re-authenticate periodically, which can be a minor inconvenience. However, this tradeoff is crucial for protecting user data and preventing unauthorized access.

Scalability: We opted for a microservices architecture to handle scaling efficiently. This choice allows us to scale individual components independently but can introduce complexity in data consistency and inter-service communication. The added complexity is a tradeoff for the ability to handle increased user loads seamlessly.

Third-Party Components vs. In-House Solutions

We utilize several third-party services to enhance functionality and streamline development:

• Authentication: We use OAuth 2.0 for secure authentication, leveraging its robust security features rather than developing a custom solution.
• Storage: AWS S3 is used for storing assets like images, videos, and 3D models due to its reliability and scalability.
• Rendering: Three.js and WebGL are used for 3D rendering to provide high-performance graphics without reinventing the wheel.

Choosing these third-party solutions allows us to focus on core functionalities while ensuring reliability and performance through established technologies.

Caching Decisions

Our engineers carefully decide what to cache to balance performance and data freshness:

• Static Assets: Images, videos, and 3D models are cached using a CDN (Content Delivery Network) like CloudFront. This ensures fast delivery to users worldwide.
• Dynamic Data: User-specific data and frequently accessed project data are cached using Redis. This reduces database load and speeds up response times for commonly accessed information.
• Sensitive Data: Authentication tokens and sensitive user data are not cached to maintain security.

By caching static and frequently accessed data, we improve performance without compromising the freshness of critical information.

API Choices

REST API: We primarily use REST for our API. REST's simplicity and widespread adoption make it easy to integrate with various clients and services. It is well-suited for CRUD (Create, Read, Update, Delete) operations and provides clear endpoint definitions.

GraphQL: In certain cases, we use GraphQL to allow clients to request exactly the data they need. This is particularly useful for complex queries and reduces the amount of data transferred over the network, improving performance.

The choice between REST and GraphQL depends on the specific use case, balancing simplicity and flexibility.

Limitations and Unique Benefits of Our Tech Stack

Limitations:

• Complexity: Microservices architecture can introduce complexity in deployment and management.
• Latency: Using multiple services and third-party APIs can introduce latency in communication.
• Dependency Management: Relying on third-party services means dependency on their uptime and performance.

Unique Benefits:

• Scalability: Our architecture allows us to scale individual components independently, ensuring we can handle increased loads efficiently.
• Performance: Using CDNs and caching strategies significantly improves the performance and responsiveness of our platform.
• Security: Leveraging established authentication protocols and secure data handling practices ensures robust security.